<template>
    <div>
        <div>
            <h4 class="font-weight-bold">第三方接口列表</h4>           
        </div>
        <b-card class="mb-4">

            <Table :data="table.data" :columns="table.columns" :loading="table.loading" stripe border class="mt-2"></Table>
            <Page show-elevator show-total size="small" class="mt-2" :total="table.total" :current="table.currentPage" 
                @on-change="(pageNum) => {
                    let self = this;
                    table.pageChange.call(self,pageNum);
                }"></Page>
        </b-card>
    </div>
</template>

<style scoped>
</style>


<script>
import Axios from "axios";

export default {
    name: "OriginIndex",
    data() {
        return {
            table: {
                showIndex: false,
                data: [],
                columns: [
                    {
                        title: "数据源",
                        key: "apiName"
                    },
                    {
                        title: "申请时间",
                        width: 120,
                        align: 'center',
                        render: (h,params) => {
                            return (
                                <div>2018-08-30</div>
                            )
                        }
                    },
                    {
                        title: "剩余次数",
                        width: 100,
                        align: 'center',
                        render: (h,params) => {
                            return (
                                <div>132</div>
                            )
                        }
                    },
                    {
                        title: "操作",
                        width: 180,
                        align: 'center',
                        render: (h,params) => {
                            let vm = this;
                            // console.log(params);
                            let isOn = params.row.enable;
                            // console.log(isOn)
                            return (
                                <div>
                                    <i-button
                                        type="text"
                                        size="small"
                                        class="mr-2"
                                        title="购买"
                                        icon="social-bitcoin"
                                        onClick={() => {
                                            return vm.goConsole(params);
                                        }}
                                    >
                                    </i-button>

                                    <i-button
                                        type="text"
                                        size="small"
                                        class="mr-2"
                                        title="接口详情页"
                                        icon="eye"
                                        onClick={() => {
                                            return vm.goConsole(params);
                                        }}
                                    >
                                    </i-button>

                                    <i-button
                                        type="text"
                                        size="small"
                                        class="mr-2"
                                        title="统计"
                                        icon="stats-bars"
                                        onClick={() => {
                                            return vm.goConsole(params);
                                        }}
                                    >
                                    </i-button>

                                    <i-button
                                        type="text"
                                        size="small"
                                        class="mr-2"
                                        title="测试"
                                        icon="bug"
                                        onClick={() => {
                                            return vm.goConsole(params);
                                        }}
                                    >
                                    </i-button>
                                </div>
                            );
                        }
                    }
                ],
                // 是否载入中
                loading: false,
                // 总页数
                total: 0,
                // 当前页数
                currentPage : 1,
                // 每页条目数
                pageSize : 10,
                // 分页切换
                pageChange: function(pageNum){
                    let self = this;
                    self.table.currentPage = pageNum;
                    self.loadAPIList().then(function(res){
                        if(res.data){
                            self.table.data = res.data.data ? res.data.data : [];
                        }
                    });
                }
            }
        };
    },
    mounted(){
        let self = this;

        //加载列表
        self.loadAPIList().then(function(res){
            // console.log(res);
            if(res.data){
                self.table.data = res.data.data ? res.data.data : [];
            }
        });
    },
    methods: {
        loadAPIList(){
            let self = this;
            self.table.loading = true;

            return new Promise(function(resolve,reject){
                self.$http
                    .get('/app/v1/apis',{
                        params: {
                            pageSize: 10,
                            currentPage: self.table.currentPage
                        }
                    })
                    .then(function(res) {
                        self.table.total = res.data.recordCount;
                        self.table.loading = false;
                        resolve(res);
                    },function(res){
                        self.table.loading = false;
                        reject(res);
                    });
            });
        },
        goConsole: function(params) {
            // console.log(params)
            this.$router.push({
                path: "/origin/index/console",
                query: {
                    oid: params.row.oid
                }
            });
        },
        goDownDefine: function() {
            this.$router.push({
                path: "/origin/index/apilistdown"
            });
        }
    }
};
</script>
